import React, { useEffect, useState } from 'react';
import { useWebscoket } from '../../hooks/useWebscoket';
import './style.scss';
import { Button, NavBar, Toast } from 'antd-mobile';
import OSS from 'ali-oss';
import { useNavigate } from 'react-router-dom';

interface ListItemType {
  user_id: string;
  message: string;
  user_avatar: string;
  server_id: string;
  server_avatar: string;
  dir: number;
  type: string;
}

// 声明一个全局变量wss
let wss: WebSocket | null = null;
const Chat: React.FC = () => {
  const navigate = useNavigate();
  // 定义用户id和服务器id
  const user_id = '1';
  const server_id = '45629082';
  // 定义一个状态变量value，用于存储输入框的值
  const [value, setValue] = useState('');
  // 定义一个状态变量list，用于存储聊天记录
  const [list, setList] = useState<ListItemType[]>([]);
  // 使用自定义hook useWebscoket，传入用户id和服务器id，以及一个回调函数
  useWebscoket({ user_id, server_id }, (ws: WebSocket) => {
    // 1. 告诉服务器， 获取聊天记录
    ws.send(
      JSON.stringify({
        type: 'getChatList',
      })
    );

    // 2. 接收 来自服务器的消息
    ws.onmessage = (e) => {
      const { type, message, data } = JSON.parse(e.data);
      // console.log(type, data);
      // 如果消息类型是getChatList，则将聊天记录存储到list中
      if (type === 'getChatList') {
        setList(data);
        console.log('聊天记录', data);
      }

      // 如果消息类型是addMessage，则将新消息添加到聊天记录中
      if (type === 'addMessage') {
        setList((prev) => {
          console.log('聊天记录', [...prev, data]);
          return [...prev, data];
        });
      }
    };

    // 将websocket连接存储到全局变量wss中
    wss = ws;
  });

  // 定义一个函数handleSend，用于向服务器发送消息
  const handleSend = ({ message, type }: { message: string; type: string }) => {
    if (message.trim() === '') return Toast.show({ content: '请输入消息内容' });
    // 向服务器发送消息
    wss?.send(
      JSON.stringify({
        type: 'addMessage',
        data: {
          user_id,
          server_id,
          message: message,
          type,
        },
      })
    );
    if (type === 'text') {
      setValue('');
    }
  };

  // 定义一个函数handleChoose，用于选择文件
  const handleChoose = () => {
    const input = document.createElement('input');
    input.type = 'file';
    // 弹出文件选择器
    input.click();

    // 内容改变
    input.onchange = async (e) => {
      // 获取选中的文件
      const file: File = e.target?.files[0];
      console.log(file);
      if (file.type.includes('image')) {
        const resp = await uploadImage(file);
        handleSend({ type: 'image', message: resp.url });
      } else if (file.type.includes('video')) {
        const resp = await uploadImage(file);
        handleSend({ type: 'video', message: resp.url });
      } else {
        Toast.show({ content: '请选择图片文件' });
      }
    };
  };

  const uploadImage = (file: File) => {
    const oss = new OSS({
      region: 'oss-cn-beijing',
      accessKeyId: 'LTAI5tDfAasEpiHZGKmfDwkC',
      accessKeySecret: 'qJUi2qKTqE52y8NzxGoIrzRbqAQpO3',
      bucket: 'g4-db',
    });
    return oss.put(file.name, file);
  };

  useEffect(() => {
    document.documentElement.scrollTop = 100000;
  }, [list]);

  return (
    <div className="chat">
      <div className="header">
        <span></span>
        <span>客服</span>
        <span
          onClick={() => navigate('/deepseek/ai')}
          style={{
            position: 'absolute',
            right: '10px',
          }}
        >
          DeepSeek
        </span>
      </div>
      <div className="content">
        {list.map((v, i) => {
          // v.dir  1 user   2 server
          // 根据消息方向，设置不同的样式
          const myClassName = v.dir === 1 ? 'content-right' : 'content-left';
          // 根据消息方向，设置不同的头像
          const avatar = v.dir === 1 ? v.user_avatar : v.server_avatar;
          return (
            <div className={myClassName} key={i}>
              <div className="avatar">
                <img src={avatar} alt="" />
              </div>
              <div className="content-box">
                {v.type === 'text' && (
                  <div className="content-message">{v.message}</div>
                )}
                {v.type === 'image' && (
                  <img className="img" src={v.message} alt="" />
                )}
                {v.type === 'video' && (
                  <video src={v.message} className="img" controls></video>
                )}
              </div>
            </div>
          );
        })}
      </div>

      <div className="footer">
        {/* 受控组件 */}
        <input
          className="text"
          value={value}
          onChange={(e) => setValue(e.target.value)}
          onKeyDown={(e) =>
            e.keyCode === 13 && handleSend({ type: 'text', message: value })
          }
        ></input>
        <Button
          color="primary"
          className="send"
          onClick={() => handleSend({ type: 'text', message: value })}
        >
          发送
        </Button>
        <Button color="success" onClick={() => handleChoose()}>
          媒体
        </Button>
      </div>
    </div>
  );
};

export default Chat;
